<template>
  <div>
    <bread-crumb></bread-crumb>
    <h1>成绩分析</h1>
    <el-row>
      <el-col :span="8" :offset="6">
        <el-input placeholder="请输入学号" v-model.trim="stu_id"></el-input>
      </el-col>
      <el-col :span="2">
        <el-button @click="getChartsData">分析成绩</el-button>
      </el-col>
    </el-row>
    <div class="stu_name">学生的姓名:{{ stu_name }}</div>
    <div class="echartsAnalysis">
      <el-row>
        <el-col :span="8">
          <div id="main" style="width: 100%; height: 100%"></div>
        </el-col>
        <el-col :span="8">
          <div id="chineseChart" style="width: 100%; height: 100%"></div>
        </el-col>
        <el-col :span="8">
          <div id="englishChart" style="width: 100%; height: 100%"></div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <div id="mathChart" style="width: 100%; height: 100%"></div>
        </el-col>
        <el-col :span="8">
          <div id="lizongChart" style="width: 100%; height: 100%"></div>
        </el-col>
        <el-col :span="8">
          <div id="wenzongChart" style="width: 100%; height: 100%"></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {
  req_entry_grade,
  req_mid_grade,
  req_end_grade,
} from "@/api/gradeInfo.js";
import { stacked, basisLine } from "@/utils/chartsClass.js";
export default {
  mounted() {},
  data() {
    return {
      stu_id: "",
      stu_name: "",
    };
  },
  methods: {
    async getChartsData() {
      // 获取到三次考试的成绩
      let result_entry = await req_entry_grade(this.stu_id);
      let result_mid = await req_mid_grade(this.stu_id);
      let result_end = await req_end_grade(this.stu_id);
      this.stu_name = result_entry.data[0].stu_name;
      // console.log(result_entry.data, result_mid.data, result_end.data);
      // 根据学号请求回来三次考试的成绩
      let gradeClass = ["chinese", "english", "math", "lizong", "wenzong"];
      let entryData = [];
      let midData = [];
      let endData = [];

      //  经过对echarts折现堆叠图的分析
      // 数据处理  按照语文", "英语", "数学", "理综", "文综  变为数组
      console.log(result_entry.data[0], result_mid.data[0], result_end.data[0]);
      // 从后台拿到的数据都是[{}]  ---->[]
      // 入学是这种方式处理   期中 期末是不是也都是这种格式
      for (let i = 0; i < gradeClass.length; i++) {
        // 入学成绩处理的结果 目的是得到  放到到echarts堆叠图当中的入学成绩的值
        getGradeData(gradeClass[i], result_entry.data[0], entryData);

        // 期中成绩处理的结果 目的是得到  放到到echarts堆叠图当中的期中成绩的值
        getGradeData(gradeClass[i], result_mid.data[0], midData);

        //  期末成绩处理的结果 目的是得到  放到到echarts堆叠图当中的期末成绩的值
        getGradeData(gradeClass[i], result_end.data[0], endData);
      }

      // gradeItem 参数：语文", "英语", "数学", "理综", "文综
      // gradeData  从服务器请求回来的数据result_entry.data[0], result_mid.data[0], result_end.data[0]
      // scoreData  放到echarts堆叠图当中的值 []
      function getGradeData(gradeItem, gradeData, scoreData) {
        for (let key in gradeData) {
          if (key == gradeItem) {
            scoreData.push(gradeData[key]);
          }
        }
      }

      /* function getGradeData(gradeItem) {
        for (let key in result_entry.data[0]) {
          if (key == gradeItem) {
            entryData.push(result_entry.data[0][key]);
          }
        }
      } */

      //   entryData [语文", "英语", "数学", "理综", "文综"] 而从服务器得到的数据[{}]
      // [{}]--->[]
      /*  for (let key in result_entry.data[0]) {
        if (key == "chinese") {
          entryData.push(result_entry.data[0][key]);
        }
      }
      for (let key in result_entry.data[0]) {
        if (key == "english") {
          entryData.push(result_entry.data[0][key]);
        }
      }
      for (let key in result_entry.data[0]) {
        if (key == "math") {
          entryData.push(result_entry.data[0][key]);
        }
      }
      for (let key in result_entry.data[0]) {
        if (key == "lizong") {
          entryData.push(result_entry.data[0][key]);
        }
      }
      for (let key in result_entry.data[0]) {
        if (key == "wenzong") {
          entryData.push(result_entry.data[0][key]);
        }
      } */
      console.log(entryData, midData, endData);
      // 堆叠图是获取成绩之后产生图
      // this.getMainChart(entryData, midData, endData);
      // stacked是从utils中封装的堆叠图模块
      stacked(this, "main", entryData, midData, endData);

      // 语文成绩分析
      // 如何将三次成绩当单科成绩提炼出来放到一个新数组当中
      /*  let gradeSubject = [];
      gradeSubject.push(result_entry.data[0].chinese);
      gradeSubject.push(result_mid.data[0].chinese);
      gradeSubject.push(result_end.data[0].chinese);
      console.log(gradeSubject);

      basisLine(this, "chineseChart", "语文", [50, 120, 150]); */

      function score(
        that,
        containerId,
        subject,
        gradeEntry,
        gradeMid,
        gradeEnd,
        subjectItem
      ) {
        let gradeSubject = [];
        gradeSubject.push(gradeEntry[subjectItem]);
        gradeSubject.push(gradeMid[subjectItem]);
        gradeSubject.push(gradeEnd[subjectItem]);
        basisLine(that, containerId, subject, gradeSubject);
      }
      // 获取语文的成绩分析图
      score(
        this,
        "chineseChart",
        "语文",
        result_entry.data[0],
        result_mid.data[0],
        result_end.data[0],
        "chinese"
      );
      // 获取英语的成绩分析图
      score(
        this,
        "englishChart",
        "英语",
        result_entry.data[0],
        result_mid.data[0],
        result_end.data[0],
        "english"
      );

      //获取数学的成绩分析图
      score(
        this,
        "mathChart",
        "数学",
        result_entry.data[0],
        result_mid.data[0],
        result_end.data[0],
        "math"
      );
      //获取理综的成绩分析图
      score(
        this,
        "lizongChart",
        "理综",
        result_entry.data[0],
        result_mid.data[0],
        result_end.data[0],
        "lizong"
      );
      score(
        this,
        "wenzongChart",
        "文综",
        result_entry.data[0],
        result_mid.data[0],
        result_end.data[0],
        "wenzong"
      );
    },
  },
};
</script>

<style lang="scss" scoped>
div {
  div {
    height: 30px;
  }
  .stu_name {
    margin: 30px 0;
    font-size: 20px;
    font-weight: 700;
  }
  .echartsAnalysis {
    div {
      height: 400px;
    }
  }
}
</style>